@layout("/common/_container.html"){
<style>
    .searchbox {
        margin: 10px 20px 0 20px;
    }

    .staticbox {
        display: flex;
        align-items: center;
        margin-left: 20px;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        height: 50px;
    }

    .static-one {
        margin-right: 30px;
    }

    .static-val {
        color: #F59A23;
    }

    .el-form-item {
        margin-bottom: 0
    }

    .tables {
        margin: 0 20px;
    }

    .reject {
        color: red;
    }

    .reject-title {
        font-size: 14px;
    }

    .pages {
        margin-top: 10px;
    }

    .el-divider--horizontal{
        margin: 0 !important;
    }
</style>
</head>

<body>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="/assets/common/module/vuejs/vue.dev.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/index.css">
    <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/display.css">
    <link rel="stylesheet" href="/assets/common/css/beautiful.css">
    <!-- 引入组件库 -->
    <script src="/assets/common/module/element-ui/lib-master/index.js"></script>

    <div id="app">
        <div class="staticbox">
            <div class="static-one">门店总数：<span class="static-val">{{staticData.totalMd}}</span>家</div>
            <div class="static-one">无绩效：<span class="static-val">{{staticData.notperformanceMd}}</span>家</div>
            <div class="static-one">有绩效：<span class="static-val">{{staticData.performanceMd}}</span>家</div>
<!--            <div class="static-one">未提交：<span class="static-val">{{staticData.notSubmitMd}}</span>家</div>-->
            <div class="static-one">未创建：<span class="static-val">{{staticData.notCreateMd}}</span>家</div>
            <div class="static-one">已创建未提交：<span class="static-val">{{staticData.createMd}}</span>家</div>
            <div class="static-one">待审核：<span class="static-val">{{staticData.submitMd}}</span>家</div>
            <div class="static-one">已驳回：<span class="static-val">{{staticData.reject}}</span>家</div>
            <div class="static-one">已通过：<span class="static-val">{{staticData.pass}}</span>家</div>
        </div>
        <el-divider></el-divider>
        <div class="searchbox">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item :style="formItemStyle" label="姓名:">
                    <el-select v-model="form.uname" size="small" filterable placeholder="请输入姓名查询">
                        <el-option v-for="item in nameData" :key="item.id" :label="item.xm" :value="item.xm">
                            {{item.xm}},{{item.id}},{{item.dm}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="日期:">
                    <el-date-picker v-model="form.date" size="small" :clearable="false" value-format="yyyy-MM"
                        format="yyyy-MM" type="month" placeholder="请选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="绩效-有/无:">
                    <el-select v-model="form.performanceStatus" size="small" placeholder="请选择">
                        <el-option v-for="item in performanceStatusData" :key="item.value" :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="提交状态:">
                    <el-select v-model="form.submitStatus" size="small" placeholder="请选择">
                        <el-option v-for="item in submitStatusData" :key="item.value" :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="营运经理:">
                    <el-select v-model="form.manager" filterable size="small" v-on:change="changeManager"
                        placeholder="请选择">
                        <el-option v-for="(item,index) in managerData" :key="index" :label="item.yyjl"
                            :value="item.yydh">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="督导:">
                    <el-select v-model="form.supervisor" filterable size="small" v-on:change="changeSupervisor"
                        placeholder="请选择">
                        <el-option v-for="(item,index) in supervisorData" :key="index" :label="item.dd"
                            :value="item.dddh">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="店名:">
                    <el-select v-model="form.storeModel" filterable size="small" value-key="ym"
                        v-on:change="changeStore" placeholder="请输入店名或妖码查询" style="width: 220px;">
                        <el-option v-for="(item,index) in storeData" :key="index" :label="item.dm+' '+item.ym"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle">
                    <el-button type="danger" size="small" v-on:click="rejectDo" v-show="showReject == '0'">驳回
                    </el-button>
                    <el-button type="primary" class="btybtn" size="small" v-on:click="searchDo">搜索</el-button>
                    <el-button size="small"  style="margin-right: 10px;" v-on:click="resetDo">重置</el-button>

                    <el-button type="primary" class="btybtn" size="small" v-on:click="exportEx">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="tables">
            <el-table v-loading="loading" :data="tableData" highlight-current-row
                :cell-style="{fontSize:'14px'}"
                :header-cell-style="headerStyle" 
                border :height="tableHeight" 
                style="width: 100%;" 
                size="small">
                <el-table-column prop="" label="序号" width="60">
                    <template scope="scope">
                        <span>{{(pageIndex - 1) * pagesize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="dm" label="店名" width="200">
                    <template scope="scope">
                        <el-popover
                            placement="top"
                            v-if="scope.row.dm"
                            popper-class="popper"
                            width="150"
                            trigger="hover">
                            <div>
                                {{scope.row.dm}}
                            </div>
                            <div class="hideone" slot="reference">
                                {{scope.row.dm}}
                            </div>
                            </el-popover>
                        </template>
                </el-table-column>
                <el-table-column prop="yaoma" label="妖码" width="80">
                </el-table-column>
                <el-table-column prop="yyjl" label="营运经理" width="90">
                </el-table-column>
                <el-table-column prop="dd" label="督导" width="80">
                </el-table-column>
                <el-table-column prop="xm" label="姓名"  width="80">
                </el-table-column>
                <el-table-column prop="zw" label="职位"  width="80">
                </el-table-column>
                <el-table-column prop="ratio" width="80" label="占比">
                    <template slot-scope="scope">
                        {{scope.row.ratio?scope.row.ratio+'%':""}}
                    </template>
                </el-table-column>
                <el-table-column prop="yhk" width="170" label="银行卡">
                </el-table-column>
                <el-table-column prop="performanceStatus" width="80" label="绩效状态">
                    <template slot-scope="scope">
                        {{scope.row.cl == null || scope.row.cl <= 0 ?"无":"有"}} </template>
                </el-table-column>
                <el-table-column prop="submitStatus" label="提交状态" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.checkStatus == '0'">已创建未提交</span>
                        <span v-else-if="scope.row.checkStatus == ''">未创建</span>
                        <span v-else-if="scope.row.checkStatus == '1'">待审核</span>
                        <span v-else-if="scope.row.checkStatus == '2'" class="reject">已驳回</span>
                        <span v-else-if="scope.row.checkStatus == '3'">已通过</span>
                    </template>
                </el-table-column>
                <el-table-column prop="month" label="绩效月份">
                    <template slot-scope="scope">
                        {{formatMonth(scope.row.month)}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination background layout="total, prev, pager, next" v-on:current-change="handleSizeChange"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="30%">
            <span slot="title" class="reject-title">驳回门店</span>
            <div>是否驳回【<span class="static-val">{{selectStore}}</span>】？</div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" v-on:click="dialogVisible = false">否</el-button>
                <el-button size="small" type="primary" v-on:click="rejectConfirm">是</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                formItemStyle: {
                    marginBottom: 0
                },
                tableData: [],
                pageIndex: 1,//当前页码
                pagesize: 20,//每页数量
                total: 0,//总条数
                dialogVisible: false,//驳回框是否显示
                loading: false,//表格是否加载
                form: {
                    uname: "",
                    date: "",
                    performanceStatus: 0,//绩效状态
                    submitStatus: -1,//提交状态
                    manager: "0",//营运经理
                    supervisor: "0",//督导
                    store: "",//店名妖码
                    storeModel: { dm: "全部", ym: "" },//店名选中数据
                },
                performanceStatusData: [
                    {
                        name: '全部',
                        value: -1
                    },
                    {
                        name: '有',
                        value: 0
                    },
                    {
                        name: '无',
                        value: 1
                    },
                ],//绩效状态
                submitStatusData: [
                    {
                        name: '全部',
                        value: -1
                    },
                    {
                        name: '未创建',
                        value: 4
                    },
                    {
                        name: '已创建未提交',
                        value: 0
                    },
                    {
                        name: '待审核',
                        value: 1
                    },
                    {
                        name: '已驳回',
                        value: 2
                    },
                    {
                        name: '已通过',
                        value: 3
                    },
                ],
                managerData: [],//营运经理数据
                supervisorData: [],//督导数据
                nameData: [],//姓名数据
                storeData: [],//店名数据
                showReject: "1",//是否显示驳回按钮 0显示 1不显示
                selectStore: "",//选择的店名名称
                staticData: {
                    totalMd: 0,
                    notperformanceMd: 0,
                    performanceMd: 0,
                    // notSubmitMd: 0,
                    notCreateMd: 0,
                    createMd: 0,
                    submitMd: 0,
                    reject: 0,
                    pass: 0
                },//统计信息数据
                tableHeight:0,
                headerStyle:{color:'#0E2231',fontWeight:'blod',background:'#F7F5FA'}
            },
            created() {
                this.getListData()
                this.getLastMonth()
                this.getNames()
                this.getManagers()
                this.getSupervisors()
                this.getStores()
                this.getShowReject()//检查是否显示驳回按钮
                this.getStatic()
                this.getHeight()
            },
            mounted() { },
            methods: {
                getHeight(){
                    let ava = document.documentElement.clientHeight
                    let height = ava-195
                    this.tableHeight = height
                },
                getLastMonth() {
                    var date = new Date();
                    var year = date.getFullYear();   //当前年：四位数字
                    var month = date.getMonth();     //当前月：0-11
                    if (month == 0) {
                        year -= 1;
                        month = 12;
                    }
                    month = month < 10 ? ('0' + month) : month;   //月份格式化：月份小于10则追加个0

                    let lastYearMonth = year + '-' + month;
                    this.$set(this.form, "date", lastYearMonth)
                    return lastYearMonth
                },
                // 搜索内容
                searchDo() {
                    this.pageIndex = 1
                    this.getListData()
                },
                // 获取列表数据
                getListData() {
                    this.loading = true
                    let { uname, date, performanceStatus, submitStatus, manager, supervisor, store } = this.form
                    let { pageIndex, pagesize } = this
                    if (!date) {
                        date = this.getLastMonth()
                    }
                    let reg = new RegExp("-");
                    date = date.replace(reg, "");
                    let formData = new FormData()
                    formData.append("page", pageIndex)
                    formData.append("limit", pagesize)
                    formData.append("xm", uname)
                    formData.append("month", date)
                    formData.append("jxStatus", performanceStatus == -1 ? "" : performanceStatus)
                    formData.append("checkStatus", submitStatus == -1 ? "" : submitStatus)
                    formData.append("yydh", manager == "0" ? "" : manager)
                    formData.append("dddh", supervisor == "0" ? "" : supervisor)
                    formData.append("yaoma", store == "0" ? "" : store)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/listPage", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.total = res.data.count
                                this.tableData = res.data.data
                                this.loading = false
                            } else {
                                this.loading = false
                            }
                        })
                },
                // 重置搜索条件
                resetDo() {
                    this.form = {
                        uname: "",
                        date: this.getLastMonth(),
                        performanceStatus: 0,
                        submitStatus: -1,
                        manager: "0",
                        supervisor: "0",
                        store: "",
                        storeModel: { dm: "全部", ym: "" }
                    }
                    this.pageIndex = 1
                    setTimeout(() => {
                        this.getListData()
                        this.getSupervisors()
                        this.getStores()
                    }, 0);
                },
                // 页码改变
                handleSizeChange(val) {
                    this.pageIndex = val
                    this.getListData()
                },
                // 驳回操作
                rejectDo() {
                    let { store } = this.form
                    if (!store) {
                        this.$message('请选择要驳回的店名');
                        return
                    }
                    this.dialogVisible = true
                },
                // 驳回确认操作
                rejectConfirm() {
                    const { store } = this.form
                    if (!store) {
                        this.$message('请选择要驳回的店名');
                        return
                    }
                    let formData = new FormData()
                    formData.append("yaoma", store)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/rejectMd", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.data.flag == "true") {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                this.getListData()
                                this.getStatic()
                            } else {
                                this.$message(res.data.message);
                            }
                            this.dialogVisible = false
                        })

                },
                exportEx() {
                    let { uname, date, performanceStatus, submitStatus, manager, supervisor, store } = this.form
                    if (!date) {
                        date = this.getLastMonth()
                    }
                    let reg = new RegExp("-");
                    date = date.replace(reg, "");
                    performanceStatus = performanceStatus == -1 ? "" : performanceStatus
                    submitStatus = submitStatus == -1 ? "" : submitStatus
                    manager = manager == "0" ? "" : manager
                    supervisor = supervisor == "0" ? "" : supervisor

                    window.location.href = '/btyPerformanceMonthInformation/exportList?xm=' + uname + '&month=' + date + '&jxStatus=' + performanceStatus + '&checkStatus=' + submitStatus + '&yydh=' + manager + '&dddh=' + supervisor + '&yaoma=' + store
                },
                // 获取姓名数据
                getNames() {
                    let formData = new FormData()
                    formData.append("page", 1)
                    formData.append("limit", 10000)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/listXm", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 0) {
                                this.nameData = res.data
                            }
                        })
                },
                // 获取营运经理数据
                getManagers() {
                    let formData = new FormData()
                    formData.append("page", 1)
                    formData.append("limit", 10000)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/listYyjl", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 0) {
                                this.managerData = [{ yyjl: "全部", yydh: "0" }, ...res.data]
                            }
                        })
                },
                // 获取督导数据
                getSupervisors() {
                    let { manager } = this.form
                    let formData = new FormData()
                    formData.append("page", 1)
                    formData.append("limit", 10000)
                    formData.append("yydh", manager == "0" ? "" : manager)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/listDd", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 0) {
                                this.supervisorData = [{ dd: "全部", dddh: "0" }, ...res.data]
                            }
                        })
                },
                // 获取店名数据
                getStores() {
                    let { manager, supervisor } = this.form
                    let formData = new FormData()
                    formData.append("page", 1)
                    formData.append("limit", 10000)
                    formData.append("yydh", manager == "0" ? "" : manager)
                    formData.append("dddh", supervisor == "0" ? "" : supervisor)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPerformanceMonthInformation/listDm", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 0) {
                                this.storeData = [{ dm: "全部", ym: "" }, ...res.data]
                            }
                        })
                },
                // 获取当前日期是否在绩效时间内 是否显示驳回按钮
                getShowReject() {
                    const requestOptions = {
                        method: "POST",
                        body: {}
                    };
                    fetch("/btyPerformanceMonthCheck/getPerformanceDay", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.showReject = res.data.pageValid
                            }
                        })
                },
                // 获取统计数据
                getStatic() {
                    const requestOptions = {
                        method: "POST",
                        body: {}
                    };
                    fetch("/btyPerformanceMonthInformation/getShopCount", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.staticData = res.data
                            }
                        })
                },
                // 营运经理改变
                changeManager(val) {
                    this.getStores()
                    this.getSupervisors()
                    this.$set(this.form, "supervisor", "0")
                    this.$set(this.form, "store", "")
                    this.form.storeModel={ dm: "全部", ym: "" }
                },
                //督导改变
                changeSupervisor(val) {
                    this.getStores()
                    this.$set(this.form, "store", "")
                    this.form.storeModel={ dm: "全部", ym: "" }
                },
                // 店名改变
                changeStore(item) {
                    this.form.store = item.ym
                    this.selectStore = item.dm

                },

                // 处理显示月份
                formatMonth(month) {
                    if (!month) {
                        return ""
                    }
                    return month.substring(0, 4) + "-" + month.substring(4)
                },
                nameQuery(value) {
                    if (value) {
                        const { nameData } = this
                        this.nameData = nameData.filter(item => {
                            return item.xm.search(value) != -1 || item.tel.search(value) != -1
                        })
                    }else{
                        this.nameData = this.nameOldData
                    }

                },
            }
        })
    </script>
</body>
@}